<template>
  <div class="index">
    <div class="top" v-if="isLogin">
      <nav-top ref="top" :href="href"></nav-top>
    </div>
    <div class="left-menu" v-if="isLogin">
      <div class="menu-wrap">
        <nav-left ref="left" :href="href"></nav-left>
      </div>
    </div>
    <div class="main-box" :class="!isLogin ? 'full-login' : ''">
      <transition name="el-fade-in-linear" mode="out-in">
        <router-view
          keep-alive
          transition="fade"
          transition-mode="out-in"
        ></router-view>
      </transition>
    </div>
    <!-- 图片预览 -->
    <see-img :imgUrl="curPreUrl" />
  </div>
</template>

<script>
import nav_top from "@/components/nav_top";
import nav_left from "@/components/nav_left";
import seeImgDetail from "@/components/seeImgDetail";

var _this;

export default {
  name: "index",
  data() {
    return {
      href: "",
      isLogin: true,
      curPreUrl: "",
    };
  },
  mounted() {
    _this = this;

    this.isLogin = false;
    var sessionId = sessionStorage.getItem("sessionId");
    // var isPc = sessionStorage.getItem("isPc") == "true";
    // sessionStorage.setItem("token1", 123);
    // var token = sessionStorage.getItem("token1");

    if (!sessionId) {
      this.isLogin = false;
    } else if (sessionId) {
      this.isLogin = true;
    }

    //初始化图片预览事件
    this.tools.listenGEvent({
      eName: "previewImg",
      success: (e) => {
        _this.curPreUrl = e.detail.imgUrl;
        $(".photo-wrap").addClass("active");
      },
    });

  },
  components: {
    "nav-top": nav_top,
    "nav-left": nav_left,
    "see-img": seeImgDetail,
    // login: () => import("./page/common/login-page")
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';

.index {
  background-color: #fff;
  width: 100%;
}

.top {
  position: fixed;
  width: 100%;
  height: 75px;
  background-color: #fff;
}

.left-menu {
  position: fixed;
  left: 0;
  top: 75px;
  width: 230px;
  height: calc(100% - 75px);
  overflow: hidden;
}

.main-box {
  position: fixed;
  left: 230px;
  top: 75px;
  overflow: hidden;
  width: calc(100% - 230px);
  height: calc(100% - 75px);
}

.full-login {
  margin-left: -230px;
  margin-top: -75px;
  width: 100% !important;
  height: 100% !important;
}

//省略号
.ellipsis {
  vertical-align: -4px;
  width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

//表格不对齐问题
body .el-table th.gutter {
  display: table-cell !important;
}

.table-img-wrap {
  text-align: center;
  cursor: pointer;
  img {
    cursor: pointer;
  }
}
</style>